<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <a href="#">nihao</a>
    <script>
        var arr = ['red', 'green', 'blue', 'pink'];
        // 1. forEach迭代 遍历
        // arr.forEach(function(value) {
        //     if (value == 'green') {
        //         console.log('找到了该元素');
        //         return true; // 在forEach 里面 return 不会终止迭代
        //     }
        //     console.log(11);

        // })
        // 如果查询数组中唯一的元素, 用some方法更合适,
        arr.some(function(value) {
            if (value == 'green') {
                console.log('找到了该元素');
                return true; //  在some 里面 遇到 return true 就是终止遍历 迭代效率更高
            }
            console.log(11);

        });
        // arr.filter(function(value) {
        //     if (value == 'green') {
        //         console.log('找到了该元素');
        //         return true; //  // filter 里面 return 不会终止迭代
        //     }
        //     console.log(11);

        // });
       
   
        window.addEventListener('load', function () {
            var inp = document.querySelectorAll('.form-control');
            // let inp = document.querySelectorAll('.inp');
            let btn = document.querySelector('.button');
            let alt = document.querySelector('.alert');
            let live = true;console.log(inp.length)
            btn.addEventListener('click', function (event) {

                for (let i = 0; i < inp.length; i++) {
                    
                    if (inp[i].value === "") {
                        alert(inp[i].value)
                        alt.style.display = 'block';
                        live = false;
                    }
                    
                }
                if (live) {
                    alt.style.display = 'none';
                }
                if (!live) {alert(live)
                    // let event = event || window.event;
                    // event.preventDefault(); // 兼容标准浏览器
                    // window.event.returnValue = false; // 兼容IE6~8
                    event.preventDefault();
                    return false;
                }
            })
        })
    </script>
</body>
<form method="post">
<input type="text" class="form-control" placeholder="username" aria-describedby="sizing-addon1">
<input type="text" class="form-control" placeholder="username" aria-describedby="sizing-addon1">
<input type="text" class="form-control" placeholder="username" aria-describedby="sizing-addon1">
<div class="dad">123</div>
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>Warning!</strong> You need to fill out all the information.
</div>
<div class="input-group input-group-sm">
    <input type="radio" class="form-control" name="sex" value="male" checked>Male
    <input type="radio" class="form-control" name="sex" value="female">Female<br>

</div>
<input type="submit" class="button form-control" value="Add User" aria-describedby="sizing-addon6">
</form>
</html>